<template>
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="props.total" :layout="props.layout" />
</template>

<script lang="ts" setup>
import { computed } from 'vue';
interface Props {
  currentPage: number;
  pageSize: number;
  pageSizes?: number[];
  layout?: string;
  total?: number;
}
const emits = defineEmits(['current-change', 'size-change']);
const props = withDefaults(defineProps<Props>(), {
  layout: 'total, sizes, prev, pager, next, jumper',
  total: 0,
  pageSizes: () => [10, 20, 50, 100]
});
const currentPage = computed({
  get: () => props['currentPage'],
  set: (val) => emits('current-change', val),
});
const pageSize = computed({
  get: () => props['pageSize'],
  set: (val) => emits('size-change', val),
});
</script>
